<template>
	<div class="city">
		<van-index-bar :index-list="computedList" @select="handleChange">
			<div v-for="data in cityList" :key="data.type">
				<van-index-anchor :index="data.type" />
				<van-cell :title="item.name" v-for="item in data.list" :key="item.cityId" @click="handleClick(item)"/>
			</div>
		</van-index-bar>
	</div>
</template>
<script>
import http from '@/util/http'
import { Toast } from 'vant'
import obj from '@/util/mixinObj'

export default {
	mixins: [obj], // 混入
	data(){
		return{
			cityList:[]
		}
	},
	// 计算属性
	computed:{
		computedList(){
			// cityList改变的时候映射
			return this.cityList.map(item => item.type)
		}
	},

	mounted(){
		
		http({
			url:'/gateway?k=7229414',
			headers:{
				'X-Host': 'mall.film-ticket.city.list'
			}
		}).then(res=>{
				this.cityList = this.renderCity(res.data.data.cities)
		})
	},
	methods:{
		handleChange(data){
			Toast(data);
		},
		renderCity(list){
			
			var cityList = []
			var letterList = []
			// 生产26个字母
			for (var i = 65;i < 91;i++){
				letterList.push(String.fromCharCode(i))
			}

			letterList.forEach((letter) => {
				var newList = list.filter((item) => item.pinyin.substring(0,1).toUpperCase() === letter)
				// console.log(newList)

				// 排除没有某些字母开头的城市
				newList.length > 0 && cityList.push({
					type: letter,
					list: newList
				})
			})

			return cityList
		},
		handleClick(item){
			// console.log(item.name,item.cityId);

			// 传统多页面方案
			// 1.location.href = '#/cinemas?cityname=' + item.name
			// 2.cookie , localStorage

			// 单页面方案
			// 1.中间人模式
			// 2.bus事件总线 $on , $emit


			//vuex- 状态管理模式  管理共享状态
			// 有风险 无人管理状态 任何界面使用 都可能改变以下值
			// this.$store.state.cityName = item.name
			// 提交管理方式更安全
			// 提交到mutations
			this.$store.commit('changeCityName', item.name)
			this.$store.commit('changeCityId', item.cityId)
			this.$router.back()
		}
	}
}
</script>
<style lang="scss">
.van-toast--html, .van-toast--text{
		min-width: 30px;
	}
</style>